import 'package:flutter/material.dart';
import 'dart:math' as math;

class MoveWidget extends StatefulWidget {
  const MoveWidget({
    required this.background,
    required this.backgroundUnenabled, // 如果为空，则不可操作的背景是再可操作的背景的基础上设置30%透明度
    required this.icon,
    required this.iconUnenabled, // 如果为空，则不可操作的icon是再可操作icon的基础上设置30%透明度
    required this.radiusBackground,
    required this.radiusIcon,
    required this.onChange,
    required this.onStartMove,
    required this.onStopMove,
    required this.enable,
    this.isMoveStick = false,
  });

  final String background;
  final String backgroundUnenabled;
  final String icon;
  final String iconUnenabled;
  final double radiusBackground;
  final double radiusIcon;
  final bool isMoveStick;
  final bool enable; //是否可操作
  final Function(double angleInDegree) onChange;
  final Function() onStartMove;
  final Function() onStopMove;
  @override
  _MoveWidgetState createState() => _MoveWidgetState();
}

class _MoveWidgetState extends State<MoveWidget> {
  late Offset _position = Offset(1, 1); // 初始位置（圆心） 单位是背景圆形半径
  late Offset _originalPosition = Offset(1, 1); // 圆心位置 单位是背景圆形半径
  bool isPaning = false; // 是否在平移

  @override
  void initState() {
    super.initState();
  }

  void _onPositionChnage(Offset globalPosition) {
    RenderBox renderBox = context.findRenderObject() as RenderBox;
    Offset localPosition = renderBox.globalToLocal(globalPosition); // 以左上角为原点

    // 计算相对于圆心的距离
    double dx =
        localPosition.dx - _originalPosition.dx * widget.radiusBackground;
    double dy =
        localPosition.dy - _originalPosition.dy * widget.radiusBackground;
    double distance = math.sqrt(dx * dx + dy * dy);

    //计算角度
    double angle = math.atan2(dy, dx);
    double angleInDegree =
        math.atan2(dy, dx) * (180 / math.pi) + 180; // 0度方向是向左，角度增加方向是顺时针方向
    print(
        "_onPanUpdate: angleInDegree: $angleInDegree,  x: ${localPosition.dx}，  y： ${localPosition.dy}, max_x: ${widget.radiusBackground * 2}, max_y: ${widget.radiusBackground * 2}");

    // 计算新的位置
    double iconMoveRadius =
        widget.radiusBackground - widget.radiusIcon; // 中间的圆形图标能移动的圆形范围的半径
    if (distance <= iconMoveRadius) {
      _position = Offset(localPosition.dx / widget.radiusBackground,
          localPosition.dy / widget.radiusBackground);
    } else {
      // 如果超出范围，则将位置限制在边界上
      double newX = _originalPosition.dx * widget.radiusBackground +
          iconMoveRadius * math.cos(angle);
      double newY = _originalPosition.dy * widget.radiusBackground +
          iconMoveRadius * math.sin(angle);
      _position = Offset(
          newX / widget.radiusBackground, newY / widget.radiusBackground);
    }
    if (widget.isMoveStick && angleInDegree > 180) {
      // 如果超出范围，则将位置限制在边界上
      _position = Offset(_position.dx, 1);
    }

    // 执行角度变化回调
    setState(() {});
    widget.onChange(angleInDegree);
  }

  void _onPanStart(DragStartDetails details) {
    if(!widget.enable){
      return;
    }

    widget.onStartMove();
    _onPositionChnage(details.globalPosition);
  }

  void _onPanUpdate(DragUpdateDetails details) {
    if(!widget.enable){
      return;
    }

    _onPositionChnage(details.globalPosition);
  }

  void _onPanEnd(DragEndDetails details) {
    if(!widget.enable){
      return;
    }

    setState(() {
      _position = _originalPosition; // 回到原点
    });
    widget.onStopMove();
    isPaning = false;
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Positioned(
            left: 0, // 调整以使图片中心对齐
            top: 0, // 调整以使图片中心对齐
            child: GestureDetector(
              onPanStart: _onPanStart,
              onPanUpdate: _onPanUpdate,
              onPanEnd: _onPanEnd,
              child: widget.enable
                  ? Image.asset(
                      widget.background,
                      width: widget.radiusBackground * 2,
                      //height:  widget.radiusBackground * 2,
                      fit: BoxFit.fill, // 设置图片填充方式
                    )
                  : (widget.backgroundUnenabled.isNotEmpty
                      ? Image.asset(
                          widget.backgroundUnenabled,
                          width: widget.radiusBackground * 2,
                          //height:  widget.radiusBackground * 2,
                          fit: BoxFit.fill, // 设置图片填充方式
                        )
                      : Image.asset(
                          color: Colors.white.withOpacity(0.3), // 设置透明度为30%
                          colorBlendMode: BlendMode.modulate,
                          widget.background,
                          width: widget.radiusBackground * 2,
                          //height:  widget.radiusBackground * 2,
                          fit: BoxFit.fill, // 设置图片填充方式
                        )),
            )),
        Positioned(
          left: _position.dx * widget.radiusBackground - widget.radiusIcon,
          top: _position.dy * widget.radiusBackground - widget.radiusIcon,
          // left:
          //     (widget.radiusBackground - widget.radiusIcon), // 调整以使图片中心对齐
          // top:
          //     (widget.radiusBackground - widget.radiusIcon), // 调整以使图片中心对齐
          child: GestureDetector(
            onPanStart: _onPanStart,
            onPanUpdate: _onPanUpdate,
            onPanEnd: _onPanEnd,
            child: widget.enable ? Image.asset(
              widget.icon, // 替换为你的图片URL
              width: widget.radiusIcon * 2,
              height: widget.radiusIcon * 2,
            ):(
                widget.iconUnenabled.isNotEmpty?Image.asset(
                  widget.iconUnenabled, // 替换为你的图片URL
                  width: widget.radiusIcon * 2,
                  height: widget.radiusIcon * 2,
                ):Image.asset(
                  widget.icon, // 替换为你的图片URL
                  color: Colors.white.withOpacity(0.3), // 设置透明度为30%
                  colorBlendMode: BlendMode.modulate,
                  width: widget.radiusIcon * 2,
                  height: widget.radiusIcon * 2,
                )
            ),
          ),
        ),
      ],
    );
  }
}
